<template>
	<view v-if="userStore.userInfo.type == 1" class="page group-info">
		<view class="qun-header">
			<nav-header :fixed="false" :show-border="false" :title="group.name+`(${groupMembers.length})`"
				:show-right="false" bg-color="#FFFFFF" left-icon-color="white">
			</nav-header>
			<view class="qun-avatar">
				<image-upload :onSuccess="onUnloadImageSuccess" v-if="isOwner || isAdmin">
					<head-image class="avatar-image" :name="group.name" :url="group.headImage" :size="125"></head-image>
					<!-- <image class="avatar-image" v-if="group.headImage" :src="group.headImage" lazy-load="true"
						mode="aspectFill" />
					<image class="avatar-image" v-else :src="getResource('/icon/qun-avatar-default.svg')"
						lazy-load="true" mode="aspectFill">
					</image> -->
				</image-upload>
				<view class="" v-else>
					<head-image class="avatar-image" :name="group.name" :url="group.headImage" :size="125"></head-image>
					<!-- <image class="avatar-image" v-if="group.headImage" :src="group.headImage" lazy-load="true"
						mode="aspectFill" />
					<image class="avatar-image" v-else :src="getResource('/icon/qun-avatar-default.svg')"
						lazy-load="true" mode="aspectFill">
					</image> -->
				</view>
				<view class="qun-name">
					{{ group.name }}
				</view>
			</view>
		</view>
		<view class="group-members-info">
			<view class="info-header">
				<view>
					<text>群成员:</text>
					<!-- <text style="font-size: 25rpx;padding-left: 10rpx;">共{{ groupMembers.length }}人</text> -->
				</view>
				<!-- <view class="header-right" @tap="goPage(`/pageSubOne/group/group-member?id=${this.groupId}`)">
					<text>查看剩余群成员</text>
					<up-icon size="16" name="arrow-right" color="#909399"></up-icon>
				</view> -->
			</view>
			<view v-if="!group.quit" class="group-members">
				<view class="member-items">
					<view v-for="(member, idx) in groupMembers.slice(0,10)" :key="idx" class="member-grid">
						<view class="member-item" v-if="member">
							<view style="margin-left: 10rpx;">
								<head-image :id="member.userId" :name="member.showNickName" :url="member.headImage"
									:size="90" :online="member.online" :type="Number(sourceType)"
									:url-params="urlParams"></head-image>
							</view>
							<view style="display: flex;">
								<text class="member-name">{{ member.userId == userStore.userInfo.id ? '我' :
									member.showNickName }}</text>
							</view>
						</view>
					</view>
					<view class="group-user-add">
						<view class="panel"
							@tap="goPage(`/pageSubOne/group/group-invite?id=${groupId}&sourceType=${sourceType}`)">
							<svg-icon icon="plus"></svg-icon>
						</view>
						<text class="member-name">邀请</text>
					</view>
					<view class="group-user-remove" v-if="isOwner || isAdmin">
						<view class="panel" @tap="goPage(`/pageSubOne/group/group-remove?id=${groupId}`)">
							<svg-icon icon="munis"></svg-icon>
						</view>
						<text class="member-name">移出</text>
					</view>
				</view>
			</view>
			<view class="redirect-all"
				@tap="goPage(`/pageSubOne/group/group-member?id=${groupId}&type=${sourceType}&urlParams=${JSON.stringify(urlParams)}`)">
				查看全部群成员&nbsp;({{groupMembers.length}})
			</view>
		</view>
		<up-cell-group>
			<up-cell title="合作官方群" is-link v-if="group.groupType !== 0"
				:url="`/pageSubOne/group/group-official?urlOfficial=${JSON.stringify(urlOfficial)}`"></up-cell>
			<!-- v-if="group.groupType !== 0 && (isOwner || isAdmin)"  -->
			<up-cell title="运财宝" is-link v-if="group.groupType !== 0 && (isOwner || isAdmin)"
				:url="'/pageSubOne/group/group-board?id=' + groupId"></up-cell>
			<up-cell title="群聊介绍" is-link :url="'/pageSubOne/group/group-introduction?id=' + groupId"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<!-- <up-cell title="群聊名称" :value="group.name" :is-link="isOwner"
				:url="isOwner ? '/pageSubOne/group/group-name?id=' + groupId : ''"></up-cell> -->
			<up-cell title="群聊名称" :value="group.name" :is-link="isOwner || isAdmin"
				:url="isOwner || isAdmin ? `/pageSubOne/group/group-name?id=${groupId}&type=name&name=${group.name}` : ''"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<up-cell title="群名备注" is-link
				:url="`/pageSubOne/group/group-name?id=${groupId}&type=remark&name=${group.remarkGroupName}`"
				:value="group.remarkGroupName"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<up-cell title="群号和二维码" is-link @tap="controlCode">
				<template v-slot:value>
					<view class="cell-title">
						<text class="group-num text-sm-Regular">{{ group.groupNumber }}</text>
						<svg-icon icon="QR-code" :width="35"></svg-icon>
					</view>
				</template>
			</up-cell>
		</up-cell-group>
		<up-cell-group v-if="showInvitation">
			<up-cell title="邀请函" is-link :url="`/pageSubOne/group/group-invitation?id=${groupId}`"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<up-cell title="群排行" is-link :url="`/pageSubOne/group/group-rank?id=${groupId}`"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<up-cell title="群公告" is-link :url="'/pageSubOne/group/group-announce?id=' + groupId">
				<template v-slot:value>
					<view v-if="groupNotice != null&&isOwner||isAdmin">
						<text class="group-num">去编辑</text>
					</view>
				</template>
				<template v-slot:label>
					<view v-if="groupNotice != null">
						<text class="notice-text">{{ groupNotice.content }}</text>
					</view>
				</template>
			</up-cell>
			<up-cell title="设为置顶">
				<template v-slot:value>
					<up-switch v-model="group.onTop" @change="changeTop"></up-switch>
				</template>
			</up-cell>
		</up-cell-group>
		<!-- <up-cell-group>
			<up-cell title="群地区" :is-link="isOwner">
				<template v-slot:value v-if="isOwner"> -->
		<!-- <uni-data-picker v-slot:default="{data, error, options}" :localdata="address" popup-title="请选择所在地区">
						<view v-if="error" class="error">
							<text>{{error}}</text>
						</view>
						<view v-else-if="data.length" class="selected">
							<view v-for="(item,index) in address" :key="index" class="selected-item">
								<text>{{item.text}}</text>
							</view>
						</view>
						<view v-else>
							<text>请选择所在地区</text>
						</view>
					</uni-data-picker> -->

		<!-- 					<picker mode="multiSelector" @change="bindMultiPickerChange"
						@columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
						<view class="picker" style="width: 400rpx;" v-if="group.codeDetail">
							{{ group.codeDetail }}
						</view>
						<view class="picker" v-else>
							<text>未设置</text>
						</view>
					</picker>
				</template>
				<template v-slot:value v-else>
					<view class="picker" style="width: 400rpx;" v-if="group.codeDetail">
						{{ group.codeDetail }}
					</view>
				</template>
			</up-cell>
		</up-cell-group> -->
		<up-cell-group v-if="isOwner">
			<up-cell title="设置管理员" :value="adminNum" is-link
				:url="`/pageSubOne/group/group-admin?id=${groupId}&groupAdmin=${group.groupAdmin}`"></up-cell>
			<up-cell title="转让群主" is-link :url="'/pageSubOne/group/group-transfer?id=' + groupId"></up-cell>
		</up-cell-group>
		<up-cell-group>
			<!-- <up-cell title="群推广" is-link value="流量计费">
				<template v-slot:title>
					<view class="cell-title">
						<svg-icon icon="partners" class="cell-icon"></svg-icon>
						<text>群推广</text>
					</view>
				</template>
				<template v-slot:value>
					<text class="text-sm-Regular" style="color: #2970FF;">流量计费</text>
				</template>
			</up-cell> -->
			<up-cell title="升级为体验官方群" is-link v-if="(group.groupType != 2 || group.groupType != 3)
			&& (isOwner || isAdmin) && group.companyId==null" @click="upgrade()">
				<template v-slot:title>
					<view class="cell-title">
						<svg-icon icon="partners" class="cell-icon"></svg-icon>
						<text>升级为体验官方群</text>
					</view>
				</template>
			</up-cell>
			<up-cell title="升级为正式官方群" :url="'/pageSubOne/group/group-upgrade?id=' + groupId" is-link
				v-if="group.groupType != 2 &&(isOwner || isAdmin)">
				<template v-slot:title>
					<view class="cell-title">
						<svg-icon icon="partners" class="cell-icon"></svg-icon>
						<text>升级为正式官方群</text>
					</view>
				</template>
			</up-cell>
		</up-cell-group>
		<!-- v-if="group.groupType==1 || group.groupType==2"之前限制 -->
		<up-cell-group v-if="isOwner || isAdmin">
			<up-cell title="合作推广" is-link value="为本群导流"
				:url="`/pageSubOne/group/group-cooperate?groupId=${this.groupId}`">
				<template v-slot:title>
					<view class="cell-title">
						<svg-icon icon="fire" :width="36" class="cell-icon"></svg-icon>
						<text>合作推广</text>
					</view>
				</template>
				<template v-slot:value>
					<text class="text-sm-Regular" style="color: #F79009;">为本群导流</text>
				</template>
			</up-cell>
		</up-cell-group>
		<up-cell-group>
			<up-cell title="建群时间" :value="group.createdTime"></up-cell>
		</up-cell-group>
		<view v-if="!group.quit" class="btn-group">
			<!-- <up-modal :show="show" title="警告" show-cancel-button @cancel="show = false; groupName = null"
				@confirm="Dissolve()">
				<view class="slot-content">
					<text style="color:red;">您正在解散群聊，在下方输入群聊名称以便确认解散。</text>
					<view style="margin-top: 10rpx;padding-left: 10rpx;">
						<up-input placeholder="请输入文字" border="none" v-model="groupName"></up-input>
					</view>
				</view>
			</up-modal> -->
			<up-button class="btn" v-if="!fromThis" type="primary" @click="onSendMessage()">发消息</up-button>
			<up-button class="btn" v-if="!isOwner" type="error" @click="onQuitGroup()">退出群聊</up-button>
			<up-button class="btn" v-if="isOwner" type="error" @click="onDissolveGroup()">解散群聊</up-button>
		</view>
		<up-popup :show="showCode" mode="center" round="8" @close="showCode=false">
			<code-popup :show="showCode" :group-data="codeParams" :group-num="memberNum" type="group"
				:share-data="share"
				:qr-url="`https://h5.dgyxy.com/pageSubOne/group/group-join?id=${groupId}&from=true`"></code-popup>
		</up-popup>
	</view>
</template>

<script>
	import {
		uniqueArrayWithObjects
	} from '@/utils';

	export default {
		data() {
			return {
				show: false,
				showCode: false,
				showInvitation: false,
				groupId: null,
				group: {},
				sourceType: null,
				fromThis: null,
				// 跳转到用户信息时携带的参数
				urlParams: {},
				// 跳转到二维码时携带的参数
				codeParams: {},
				memberNum: 0,
				//跳转到官方子目录参数
				urlOfficial: {},
				groupMembers: [],
				groupName: null, //输入框的群名称
				chatIdx: 0,
				groupNotice: null,
				adminNum: "",
				multiArray: [
					[],
					[],
					[],
					[],
					[]
				],
				multiCode: [
					[]
				],
				multiIndex: [0, 0, 0, 0, 0],
				provinces: [],
				cities: [],
				areas: [],
				street: [],
				village: [],
				share: { //分享好友
					title: '邀请你加入',
					path: '',
					imageUrl: "https://file.dgyxy.com/resource/invitation1.png",
					desc: '通过友星缘，加入群聊一起聊天吧',
					content: ''
				},
				itemText: 'name',
				itemValue: 'code'
			}
		},
		methods: {
			controlCode() {
				if (this.userStore.userInfo.shareCode) {
					this.showCode = true
				} else {
					uni.showToast({
						title: "如要分享群二维码，请先到我的页面获取邀请码",
						icon: "none"
					})
				}
			},
			isShowInvitation(id) {
				this.$http({
					url: '/inviation/isEditable?groupId=' + id,
					method: 'GET',
				}).then(res => {
					this.showInvitation = res
				})
			},
			upgrade() {
				uni.showLoading({
					title: "正在请求资源"
				})
				this.$http({
					url: '/company/convertBusiness?groupId=' + this.groupId, // 替换为您的实际 API 接口地址
					method: 'POST',
				}).then(resp => {
					uni.showToast({
						title: "升级成功",
						icon: "cause"
					})
					uni.hideLoading()
					uni.navigateBack()

				})
			},
			close(show) {
				this.showCode = show
			},
			Dissolve() {
				if (this.groupName === this.group.name) {
					this.$http({
						url: `/group/delete/${this.groupId}`,
						method: 'delete'
					}).then(() => {
						uni.showToast({
							title: "解散成功",
							icon: "none"
						})
						setTimeout(() => {
							// #ifndef H5
							uni.navigateBack({
								delta: 1,
							})
							// #endif
							// #ifdef H5
							history.back()
							// #endif
							this.groupStore.removeGroup(this.groupId);
							this.chatStore.removeGroupChat(this
								.groupId);
						}, 100)
					});
				} else {
					uni.showToast({
						title: "请输入正确的群名称",
						icon: "none"
					})
				}
			},
			fetchProvinceData() { //省份
				return new Promise((resolve, reject) => { // 使用Promise处理异步
					this.$http({
						url: "/positionCode/province",
						method: "GET"
					}).then((data) => {
						this.provinces = data;
						this.multiArray[0] = data.map(item => item.name);
						resolve(data[0].code); // 将省份code作为Promise的结果返回
					}).catch(reject); // 处理请求错误
				});
			},

			fetchCityData(provinceId) { //城市
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/city/${provinceId}`,
						method: 'GET'
					}).then((data) => {
						this.cities = data;
						this.multiArray[1] = data.map(item => item.name);
						resolve(data[0].code); // 将城市code作为Promise的结果返回
					}).catch(reject);
				});
			},

			fetchAreaData(cityId) { //地区
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/area/${cityId}`,
						method: 'GET'
					}).then((data) => {
						this.areas = data;
						this.multiArray[2] = data.map(item => item.name);
						resolve(data[0].code); // 将地区code作为Promise的结果返回
					}).catch(reject);
				});
			},

			fetchStreetData(areaId) { //镇区
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/street/${areaId}`,
						method: 'GET'
					}).then((data) => {
						this.street = data;
						this.multiArray[3] = data.map(item => item.name);
						resolve(data[0].code); // 将镇区code作为Promise的结果返回
					}).catch(reject);
				});
			},
			fetchVillageData(streetId) { //村级
				return new Promise((resolve, reject) => {
					this.$http({
						url: `/positionCode/village/${streetId}`,
						method: 'GET'
					}).then((data) => {
						this.village = data;
						this.multiArray[4] = data.map(item => item.name);
						this.multiCode[0] = data.map(item => item.code)
						resolve();
					}).catch(reject);
				});
			},
			bindMultiPickerChange(e) { //点击完成后
				this.multiIndex = e.detail.value;
				console.log('当前选择:', this.multiArray[0][this.multiIndex[0]], this.multiArray[1][this.multiIndex[1]], this
					.multiArray[2][this.multiIndex[2]], this.multiArray[3][this.multiIndex[3]], this.multiArray[4][this
						.multiIndex[4]
					]);
				// console.log(this.multiCode[0][this.multiIndex[4]])
				let code = this.multiCode[0][this.multiIndex[4]]
				let data = {
					id: this.groupId,
					code: code
				}
				this.$http({
					url: "/group/modify",
					method: "PUT",
					data: data
				}).then((data) => {
					console.log(data)
					uni.showToast({
						title: "设置成功",
						icon: 'none'
					})
					this.loadGroupInfo()
				})
			},
			async bindMultiPickerColumnChange(e) { //选择省市区镇村
				const column = e.detail.column;
				const value = e.detail.value;
				try {
					switch (column) {
						// case 0:
						// 	const cityCode = await this.fetchCityData(this.provinces[value].code);
						// 	await this.fetchAreaData(cityCode);
						// 	this.multiIndex = [value, 0, 0, 0, 0];
						// 	break;
						case 0:
							const cityCode = await this.fetchCityData(this.provinces[value].code);
							const areaCode = await this.fetchAreaData(cityCode);
							const streetCode = await this.fetchStreetData(areaCode);
							await this.fetchVillageData(streetCode)
							this.multiIndex = [value, 0, 0, 0, 0];
							break;
						case 1:
							let areaCode1 = await this.fetchAreaData(this.cities[value].code);
							let streetCode1 = await this.fetchStreetData(areaCode1);
							await this.fetchVillageData(streetCode1)
							this.multiIndex = [this.multiIndex[0], value, 0, 0, 0];
							break;
						case 2:
							await this.fetchStreetData(this.areas[value].code);
							this.multiIndex = [this.multiIndex[0], this.multiIndex[1], value, 0, 0];
							break;
						case 3:
							await this.fetchVillageData(this.street[value].code);
							this.multiIndex = [this.multiIndex[0], this.multiIndex[1], this.multiIndex[2], value, 0];
							break;
						case 4:
							this.multiIndex = [this.multiIndex[0], this.multiIndex[1], this.multiIndex[2], this
								.multiIndex[3], value
							];
							break;
						default:
							break;
					}
				} catch (error) {
					console.error("数据请求错误:", error);
					// 处理错误，例如显示错误提示
				}
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			onUnloadImageSuccess(file, res) {
				this.group.headImage = res.data.originUrl
				this.group.headImageThumb = res.data.originUrl
				let data = {
					id: this.groupId,
					headImage: res.data.originUrl,
					headImageThumb: res.data.originUrl
				}
				this.$http({
					url: "/group/modify",
					method: "PUT",
					data: data
				}).then((group) => {
					console.log("group", group)
					this.groupStore.updateGroup(group);
					this.chatStore.updateChatFromGroup(group)
					uni.showToast({
						title: "修改头像成功",
						icon: 'none'
					});
				})
			},
			// 设置为置顶
			changeTop() {
				//获取到当前 id
				const id = this.chatStore.currentId
				this.chatStore.moveTop(id)
				if (this.group.onTop) {
					let data = {
						id: this.groupId,
						onTop: this.group.onTop
					}
					this.$http({
						url: "/group/modify",
						method: "PUT",
						data: data
					}).then((data) => {
						console.log(data)
					})
				} else {
					let data = {
						id: this.groupId,
						onTop: this.group.onTop
					}
					this.$http({
						url: "/group/modify",
						method: "PUT",
						data: data
					}).then((data) => {
						console.log(data)
					})
				}
			},
			padNumber(number) {
				return number.toString().padStart(6, '0');
			},
			// goGroupCode(){
			// 	uni.navigateTo({
			// 		url:`/pageSubOne/group/group-code?id=${this.groupId}`
			// 	})
			// },
			onSendMessage() {
				this.chatStore.openChatRedirect(this.chatStore.chatType.GROUP, this.groupId, {
					sourceType: this.sourceType
				})
				// let chat = {
				// 	type: 'GROUP',
				// 	targetId: this.group.id,
				// 	showName: this.group.showGroupName,
				// 	headImage: this.group.headImage,
				// };
				// this.chatStore.openChat(chat);
				// let chatIdx = this.chatStore.findChatIdx(chat);
				// uni.navigateTo({
				// 	url: "/pageSubOne/chat/chat-box?chatIdx=" + chatIdx
				// })
			},
			onQuitGroup() {
				uni.showModal({
					title: '确认退出?',
					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/quit/${this.groupId}`,
							method: 'DELETE'
						}).then(() => {
							uni.showModal({
								title: `退出成功`,
								content: `您已退出群聊'${this.group.name}'`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/tabbar/chat"
										});
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});
			},
			onDissolveGroup() {
				uni.showModal({
					title: '确认解散?',
					content: `确认要解散群聊'${this.group.name}'吗?`,
					success: (res) => {
						if (res.cancel)
							return;
						this.$http({
							url: `/group/delete/${this.groupId}`,
							method: 'delete'
						}).then(() => {
							uni.showModal({
								title: `解散成功`,
								content: `群聊'${this.group.name}'已解散`,
								showCancel: false,
								success: () => {
									setTimeout(() => {
										// #ifndef H5
										uni.switchTab({
											url: "/pages/tabbar/chat"
										});
										// #endif
										// #ifdef H5
										history.back()
										// #endif
										this.groupStore.removeGroup(this.groupId);
										this.chatStore.removeGroupChat(this
											.groupId);
									}, 100)
								}
							})
						});
					}
				});

			},
			loadGroupInfo() {
				this.$http({
					url: `/group/find/${this.groupId}`,
					method: 'GET'
				}).then((group) => {
					// 修改分享标题
					this.share.title = this.userStore.userInfo.nickName + '邀请你加入' + group.name

					group.groupNumber = this.padNumber(group.groupNumber)
					if (group.groupAdmin == null || group.groupAdmin.length == 0) {
						this.adminNum = "无管理员"
					} else {
						this.adminNum = `共${group.groupAdmin.length}人`
					}
					this.group = group;
					console.log(this.group)
					this.urlOfficial = {
						id: this.groupId,
						groupType: this.group.groupType,
						sourceType: this.sourceType,
						title: this.group.name
					}
					this.codeParams = {
						id: this.groupId,
						title: this.group.name,
						groupType: this.group.groupType,
						groupNumber: this.group.groupNumber,
						headImage: this.group.headImage
					}
					// 更新聊天页面的群聊信息
					this.chatStore.updateChatFromGroup(group);
					// 更新聊天列表的群聊信息
					this.groupStore.updateGroup(group);

				});
			},
			loadGroupMembers() {
				this.$http({
					url: `/group/members/${this.groupId}`,
					method: "GET"
				}).then((members) => {
					this.groupMembers = uniqueArrayWithObjects(members.filter(m => !m.quit), "userId")
					this.memberNum = this.groupMembers.length
					// this.$set(this.codeParams, "groupMembers", this.groupMembers.length)
				})
			},
			loadGroupNotice(id) {

				let data = {
					groupId: id
				}

				this.$http({
					url: `/group/findGroupNotice?pageNum=1&pageSize=1`,
					method: 'POST',
					data: data
				}).then((notice) => {
					this.groupNotice = notice && notice.records && notice.records[0] || []
				})
			}
		},
		computed: {
			ownerName() {
				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
				return member && member.showNickName;
			},
			isOwner() {
				return this.group.ownerId == this.userStore.userInfo.id;
			},
			isAdmin() {
				if (this.group.groupAdmin) {
					return this.group.groupAdmin.includes(this.userStore.userInfo.id);
				} else {
					return false
				}
			}
		},
		async onLoad(options) {
			this.chatIdx = options.chatIdx
			this.groupId = options.id;
			console.log("群id", this.groupId)
			this.sourceType = options.sourceType
			this.fromThis = options.fromThis
			this.urlParams = {
				sourceType: options.sourceType,
				fromThis: options.fromThis,
			}
			// this.share.path = `/pageSubOne/group/group-join?id=${this.groupId}&from=true`
			this.share.path =
				`/pageSubOne/common/invitation-letter?id=${this.groupId}&from=true&shareGroupCode=${this.userStore.userInfo.shareCode}`
			// 查询群聊信息
			this.loadGroupInfo(options.id);
			// 查询群聊成员
			this.loadGroupMembers(options.id)
			// 查询群聊公告
			this.loadGroupNotice(options.id)
			// 查询是否有权限编辑邀请函
			this.isShowInvitation(options.id)

			await this.fetchProvinceData();
			if (this.provinces.length > 0) {
				await this.fetchCityData(this.provinces[0].code);
				if (this.cities.length > 0) {
					await this.fetchAreaData(this.cities[0].code);
					if (this.areas.length > 0) {
						await this.fetchStreetData(this.areas[0].code)
						if (this.street.length > 0) {
							await this.fetchVillageData(this.street[0].code)
						}
					}
				}
			}
		}

	}
</script>
<style lang="scss" scoped>
	/* #ifdef H5 */
	:deep(.u-transition.u-fade-enter-to.u-fade-enter-active) {
		z-index: 100 !important;
	}

	:deep(.u-transition.u-fade-zoom-enter-to.u-fade-zoom-enter-active) {
		z-index: 100 !important;
	}

	/* #endif */
	.group-info {
		background-color: $gray-50 !important;
	}

	.qun-header {
		position: relative;
		width: 100%;
		background-color: $white;

		:deep(.u-navbar__content__title) {
			color: $gray-900;
		}

		.qun-avatar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 40rpx;
			padding-top: 12px;

			.avatar-image {
				width: 65px;
				border-radius: 5px;
			}

			.qun-name {
				font-size: 30rpx;
				color: $black;
			}
		}
	}

	.picker {
		font-size: 28rpx;
		color: #AAAAAA;
	}

	.group-members-info {
		width: 100%;
		background-color: $white;
		margin-bottom: 8px;

		.redirect-all {
			border-top: 1px solid $gray-200;
			padding: 14px 16px;
			font-size: 14px;
			color: $gray-400;
			text-align: center;
			width: 80%;
			margin: 0 auto;
			cursor: pointer;
		}

		.info-header {
			padding: 26rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 30rpx;
			color: rgb(48, 49, 51);
			// color: #000;

			.header-right {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				color: #aaa;
			}
		}
	}

	.group-info {

		.group-members {
			background: white;
			padding: 20rpx 30rpx;

			// width: 100%;
			.member-items {
				/* display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 35rpx; */
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
				gap: 10px;

				.group-user-add,
				.group-user-remove {
					font-size: 22rpx;
					display: flex;
					flex-direction: column;
					gap: 10rpx;
					color: $gray-600;
					align-items: center;
					justify-content: space-between;

					.panel {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 45px;
						height: 45px;
						border-radius: 8px;
						background-color: $gray-100;
					}
				}

				.member-item {
					display: flex;
					flex-direction: column;
					position: relative;
					align-items: center;
					justify-content: space-between;
					white-space: nowrap;
					gap: 15rpx;
					// width: 85rpx;

					.member-name {
						display: inline-block;
						overflow: hidden;
						text-overflow: ellipsis;
						width: 80rpx;
						// flex: 1;
						font-size: 22rpx;
						text-align: center;
						white-space: nowrap;
						color: #555555;
					}
				}

				.invite-btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100rpx;
					height: 100rpx;
					margin: 10rpx;
					border: #686868 dashed 2px;
					border-radius: 10%;
				}
			}

			.member-more {
				padding: 20rpx;
				text-align: center;
				font-size: 16px;
			}
		}


		.group-detail {
			margin-top: 30rpx;
			padding: 30rpx;
			background: white;

			.detail-text {
				font-size: 28rpx;
				font-weight: 600;
			}

			.group-edit {
				padding: 20rpx;
				text-align: center;
				font-size: 30rpx;
			}
		}

		.cell-title {
			display: flex;
			color: $gray-500;

			.cell-icon {
				margin-right: 16rpx;
			}
		}

		.group-num {
			margin-top: -2rpx;
			margin-right: 8rpx;
			color: $brand-500;
		}

		.notice-text {
			color: #AAAAAA;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}


		.btn-group {
			height: 400rpx;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: stretch;
			justify-content: flex-end;
			gap: 20rpx;

			.btn {
				width: 100%;
			}
		}
	}
</style>